<!--负责 HTML 结构的部分，所有展示的内容都在这里定义。-->
<template>

  <h1>{{ articleList[0].title }}}</h1>
  <p>{{ articleList[0].summary }}</p>
  <p>作者：{{ articleList[0].author }}</p>
  <p>阅读量：{{ articleList[0].readCt }}</p>

</template>

<!--逻辑的“后台”，数据、方法和生命周期钩子全在这里，`JavaScript`的代码就编写在这个标签下。-->
<script setup>
import {onMounted, ref} from "vue";

const articleList = ref([{
  title: "一小时构建Vue知识体系-default",
  summary: "关注方才兄，一小时构建Vue知识体系-default",
  author: "方才",
  readCt: 12
}])

onMounted(() => {
  // 模拟异步API请求数据
  setTimeout(() => {
    articleList.value = [];
    articleList.value.push({
      title: "一小时构建Vue知识体系-async",
      summary: "关注方才兄，一小时构建Vue知识体系-async",
      author: "方才-async",
      readCt: 19
    })
  }, 2000)
})

</script>

<!--用``CSS``定义组件样式，加上``scoped``后样式只会在这个组件内生效，不会影响别的地方。-->
<style scoped>

</style>
